<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>btn</button>

  <script>
    // 'use strict';
    // 1. 在全局使用this的时候，this指向最大的Window对象
    console.log("全局的this： " + this);



    // 2. 全局函数/普通函数，this指向的也是window
    function fn() {
      console.log("全局函数的this： " + this);
    }
    fn()

    

    // 3. 严格模式下，普通函数的this指向的是undefined
    // function fn3() {
    //   console.log("严格模式下的this： " + this);
    // }
    // fn3()



    // 4. 对象里面的this, 指向的是整一个对象
    const obj = {
      a: 123,
      fn: function() {
        console.log("对象里面的this： " + this.a);
      }
    }
    obj.fn();



    // 5. 构造函数的this, 指向的是构造函数构造的实例
    function Person(name) {
      console.log("构造函数里面的this： " + this);
      this.name = name;
    }
    const person = new Person("zhangsan")

    // 6. 事件处理函数, 指向的是事件对象(触发事件的那个元素)
    document.querySelector("button").onclick = function() {
      console.log(this);
    }

    // 7. 定时器里面的this, 指向的是window对象
    // setInterval(function() {
    //   console.log(this);
    // }, 1000)


    // 8. 箭头函数的this指向, 指向的是箭头函数外层的那个this
    // 箭头函数的this会根据上下文来进行确定
    // 箭头函数的this指向外层
    function fn3() {
      this;
      const fn4 = () => {
        console.log(this);
      }
      fn4()
    }
    fn3();
  </script>
</body>
</html>
